<template> 
    <div class="app-container">
        <el-card class="operate-container" shadow="never">
            <i class="el-icon-tickets"></i>
            <span>发货列表</span>
        </el-card>
        <div class="table-container">
            <el-table ref="deliverOrderTable"
                      style="width: 100%;"
                      :data="list" border>
                <el-table-column label="订单编号" width="180" align="center">
                    <template slot-scope="scope">{{scope.row.orderSn}}</template>
                </el-table-column>
                <el-table-column label="收货人" width="180" align="center">
                    <template slot-scope="scope">{{scope.row.receiverName}}</template>
                </el-table-column>
                <el-table-column label="手机号码" width="160" align="center">
                    <template slot-scope="scope">{{scope.row.receiverPhone}}</template>
                </el-table-column>
                <el-table-column label="邮政编码" width="160" align="center">
                    <template slot-scope="scope">{{scope.row.receiverPostCode}}</template>
                </el-table-column>
                <el-table-column label="收货地址" align="center">
                    <template slot-scope="scope">{{scope.row.address}}</template>
                </el-table-column>
                <el-table-column label="配送方式" width="160" align="center">
                    <template slot-scope="scope">
                        <el-select placeholder="请选择物流公司"
                                   v-model="scope.row.deliveryCompany"
                                   size="small">
                            <el-option v-for="(item, index) in companyOptions"
                                       :label="item.express"
                                       :value="item.comCode"
                                       :key="index">
                            </el-option>
                        </el-select>

                        <!--                        <el-select v-model="value" placeholder="请选择物流公司" filterable :filter-method="dataFilter">-->
                        <!--                            <el-option v-for="item in companyOptions" :key="item.express" :label="item.express"-->
                        <!--                                       :value="item.comCode"/>-->
                        <!--                        </el-select>-->
                    </template>
                </el-table-column>


                <el-table-column label="发货地址" width="160" align="center">
                    <template slot-scope="scope">
                        <el-select placeholder="请选择发货地址" size="small" v-model="scope.row.companyAddressId">
                            <el-option v-for="(item, index) in deliverAddressOptions"
                                       :label="item.addressName"
                                       :value="item.id"
                                       :key="index">
                            </el-option>
                        </el-select>
                    </template>
                </el-table-column>
                <el-table-column label="物流单号" width="180" align="center">
                    <template slot-scope="scope">
                        <el-input size="small" v-model="scope.row.deliverySn"></el-input>
                    </template>
                </el-table-column>
            </el-table>
            <div style="margin-top: 15px;text-align: center">
                <el-button @click="cancel">取消</el-button>
                <el-button @click="confirm" type="primary">确定</el-button>
            </div>
        </div>
    </div>
</template>
<script>
    import {deliveryOrder, getDeliveryExpressCompanyList} from '@/api/order'
    import {allList} from '@/api/oms/omsCompanyAddress'

    // const defaultLogisticsCompanies = [];
    export default {
        name: 'deliverOrderList',
        data() {
            return {
                value: '',
                list: [],
                companyOptions: [],
                deliverAddressOptions: [],
                companyAddressId: null
            }
        },
        created() {
            this.list = this.$route.query.list;
            this.getDeliveryExpressCompanyList();
            this.getDeliverAddressOptionsList();

        },
        methods: {
            getDeliveryExpressCompanyList() {
                getDeliveryExpressCompanyList({}).then(response => {
                    this.companyOptions = response.data;
                });
            },
            getDeliverAddressOptionsList() {
                allList({}).then(response => {
                    this.deliverAddressOptions = response.data;
                });
            },
            cancel() {
                this.$router.back();
            },
            confirm() {
                this.$confirm('是否要进行发货操作?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    console.log("参数：" + JSON.stringify(this.list))
                    // 批量发货
                    deliveryOrder(this.list).then(response => {
                        this.$router.back();
                        this.$message({
                            type: 'success',
                            message: '发货成功!'
                        });
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消发货'
                    });
                });
            }
        }
    }
</script>
<style></style>


